import React, { useEffect, Suspense } from 'react';
import { Outlet } from 'react-router-dom';
import { ThemeWrapper } from '@/components/theme-wrapper';
import { TooltipProvider } from '@/components/ui/tooltip';
import { ThemeCustomizer } from '@/components/theme-customizer';
import { ModeToggle } from '@/components/mode-toggle';
import { LanguageChanger } from '@/components/language-changer';
import '@/lib/i18n';

const RootLayout = () => {
    useEffect(() => {
        const mode = localStorage.getItem('mode') || 'system';
        switch (mode) {
            case 'dark': {
                document.documentElement.classList.add('dark');
                document.documentElement.style.colorScheme = 'dark';
                break;
            }
            case 'light': {
                document.documentElement.classList.remove('dark');
                document.documentElement.style.colorScheme = 'light';
                break;
            }
            case 'system': {
                if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
                    document.documentElement.classList.add('dark');
                    document.documentElement.style.colorScheme = 'dark';
                } else {
                    document.documentElement.classList.remove('dark');
                    document.documentElement.style.colorScheme = 'light';
                }
                break;
            }
            default: {
                break;
            }
        }
    }, []);

    return (
        <Suspense fallback='loading'>
            <TooltipProvider>
                <ThemeWrapper className='flex flex-col h-full'>
                    <div className=' bg-[#111] text-white flex justify-end'>
                        <ThemeCustomizer />
                        <ModeToggle />
                        <LanguageChanger />
                    </div>
                    <Outlet />
                </ThemeWrapper>
            </TooltipProvider>
        </Suspense>
    );
};

export default RootLayout;
